<template>
  <div id="member" class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <!-- <el-select v-model="payStatusOption" clearable placeholder="缴费状态" style="margin:0 20px;">
            <el-option
            v-for="item in payStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select> -->
        <el-select v-model="signOption" clearable placeholder="签到状态" style="margin:0 20px;">
          <el-option
            v-for="item in signOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <el-button type="primary" size="medium" @click="exportExcel">导出EXCEL</el-button>
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="头像"
        width="100">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="nickname"
        width="120"
        label="昵称">
      </el-table-column>
      <el-table-column
        width="120"
        v-for="(item,index) in sign_up_table" :key="index"
        :label="item.name"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div style="whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;">{{scope.row.sign_up_info_list[index]}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="activity_conduct" label="状态" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.status==1">
            <el-tag type="success" v-if="scope.row.is_sign==1">{{scope.row.sign_status}}</el-tag>
            <el-tag type="info" v-if="scope.row.is_sign==0">{{scope.row.sign_status}}</el-tag>
          </div>
          <div v-if="scope.row.status!=1">
            <el-tag type="success" v-if="scope.row.status==2">{{scope.row.status_name}}</el-tag>
            <el-tag type="info" v-if="scope.row.status==3">{{scope.row.status_name}}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="created_at"
        label="报名时间"
        show-overflow-tooltip
        width="180"
      >
      </el-table-column>
      <el-table-column label="操作" width='150'>
        <template slot-scope="scope">
          <el-button type='primary' size="mini" v-if="scope.row.status==2" @click="activitySignUpReview(scope.row.id,'pass')">通过
          </el-button>
          <el-button type='danger' size="mini" v-if="scope.row.status==2" @click="activitySignUpReview(scope.row.id,'refuse')">拒绝
          </el-button>
          <el-button type='primary' size="mini" v-if="scope.row.status==1&&scope.row.is_sign==0" @click="signIn(scope.row.id)">确认签到
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->

    <!-- 导出Excel列表   -->
    <el-table
      :data="ExcelData"
      style="width: 100%"
      id="out-table"
      v-show="false"
    >
      <el-table-column
        prop="nickname"
        width="120"
        label="昵称">
      </el-table-column>
      <el-table-column
        width="200"
        v-for="(item,index) in sign_up_table" :key="index"
        :label="item.name"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div>{{scope.row.sign_up_info_list[index]}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="报名时间"
        show-overflow-tooltip
        width="180"
      >
      </el-table-column>
      <el-table-column prop="activity_conduct" label="签到" width="100">
        <template slot-scope="scope">
          <div>
            <el-tag type="success" v-if="scope.row.is_sign==1">√</el-tag>
            <el-tag type="info" v-if="scope.row.is_sign==0"></el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表end  -->

    <!-- 在职证明弹窗 -->
    <el-dialog title="在职证明" :visible.sync="certificationVisible" @close="initData">
      <div>这是在职证明11111</div>
    </el-dialog>
    <!-- 在职证明弹窗end -->


  </div>
</template>
<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  export default {
    name: 'member',
    data() {
      return {
        certificationVisible: false,//查看个性签名弹窗状态
        searchText: '',
        userAuthId: '',//选中的用户id

        // payStatusOption:'',//头部筛选的缴费状态
        // payStatusOptions:[
        //     {label:'全部',value:0},
        //     {label:'已缴费',value:1},
        //     {label:'未缴费',value:2}

        // ],
        signOption: '',//头部筛选的签到状态
        signOptions: [
          {label: '全部', value: -1},
          {label: '已签到', value: 1},
          {label: '未签到', value: 0}
        ],


        tableData: [],
        ExcelData: [],
        sign_up_table: [],
        page: 1,
        totalPage: 0,
        limit: 16,
        excelbtn: 0

      }
    },
    watch: {},
    methods: {
      async activitySignUpReview(id,type){
        let params = {
          id: id,
          type: type
        }
        const res = await this.$api.activitySignUpReview(params);
        if (res.data.level == 'success'){
          this.$message.success(res.data.message);
          this.getActivitySignInList();
        } else {
          this.$message.error(res.data.message);
        }
      },
      //导出excel
      async exportExcel(){
        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '活动报名表.xlsx')
        }catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      search() {
        this.excelbtn = 0;
        this.page = 1;
        this.getActivitySignInList()
      },
      async getActivitySignInList() {
        //获取会员列表
        let params = {
          page: this.page,
          limit: this.limit,
          activity_id: this.id,
          is_sign: this.signOption == -1 ? '' : this.signOption
        }
        let res = await this.$api.getActivitySignInList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.sign_up_table = res.data.sign_up_table;
          this.totalPage = res.data.page_info.total;
        }
      },
      async getSignUpSuccessList() {
        //获取会员列表
        let params = {
          activity_id: this.id,
        }
        let res = await this.$api.getSignUpSuccessList(params);
        if (res.data.level == 'success') {
          this.ExcelData = res.data.data;
        }
      },
      pageChange(e) {
        //翻页
        this.excelbtn = 0;
        this.page = e;
        this.getActivitySignInList();
      },
      async signIn(id) {
        //签到
        let judge = null;
        let tit = '签到该用户?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.activitySign(id)
        }
        console.log(judge)
      },
      async activitySign(id) {
        let res = await this.$api.activitySign({id: id});
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getActivitySignInList();
        } else {
          this.$message.error(res.data.message)
        }
      },

      showCertification() {
        this.certificationVisible = true
      },
      initData() {

      }

    },
    mounted() {
      this.id = this.$route.query.id
      this.getActivitySignInList();
      this.getSignUpSuccessList();
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }
</style>
